<template>
  <div>
    <HeaderTitle title="车辆品牌" />
    <div class="carType">
      <div
        v-for="item in list "
        :key="item.id"
        class="bankBox"
      >
        <Bank
          :id="item.id"
          :bankTitle="item.titleName"
          :list="item.list"
        />
      </div>

    </div>
  </div>
</template>
<script>
import HeaderTitle from '../header.vue'
import Bank from '../bank'
export default {
  name: 'CarType',
  data () {
    return {
      list: [
        {
          id: 1,
          titleName: '高端',
          list: []
        },
        {
          id: 2,
          titleName: '中端',
          list: []
        },
        {
          id: 3,
          titleName: '低端',
          list: []
        }
      ]
    }
  },
  components: {
    HeaderTitle,
    Bank
  },
  inject: ['bankDataThis'],
  mounted () {
    console.log('mounted====this.bankDataThis', this.bankDataThis)
  },
  watch: {
    'bankDataThis.bankList': {
      handler (val) {
        console.log('handler===val', val)
        this.list = [
          {
            id: 1,
            titleName: '高端',
            list: val.filter(item => item.brandClassify === '高端')
          },
          {
            id: 2,
            titleName: '中端',
            list: val.filter(item => item.brandClassify === '中端')
          },
          {
            id: 3,
            titleName: '低端',
            list: val.filter(item => item.brandClassify === '低端')
          }
        ]
      },
      immediate: true
    }
  }
}
</script>
<style  scoped>
.bankBox {
  width: 100%;
  box-sizing: border-box;
  padding: 30px 50px;
}
</style>
